<template>
  <div>
    欢迎你{{user}}
<a href="javascript:void(0)" @click="logout">退出</a>
    <div>
      <ul>
        <li>
          <a >
            <cite>用户管理</cite>
          </a>
          <ul>
            <li>
              <a href="javascript:void(0)" @click="tabChange(teacherList)">
                <cite>老师管理</cite>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" @click="tabChange(studentList)">
                <cite>学生管理</cite>
              </a>
            </li>
            <li v-if="roles.includes('ROLE_super')">
              <a href="javascript:void(0)" @click="tabChange(teacherList)" >
                <cite>管理员管理</cite>
              </a>
            </li>
          </ul>
        </li>
        <li>
        <a >
          <cite>课程管理</cite>
        </a>
        <ul class="sub-menu">
          <li>
            <a href="javascript:void(0)" @click="tabChange(courseList)">
              <cite>课程管理</cite>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)" @click="tabChange(classList)">
              <cite>班级管理</cite>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)" @click="tabChange(scoreList)">
              <cite>成绩审阅</cite>
            </a>
          </li>
        </ul>
        </li>
      </ul>
    </div>
    <!--
      动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。
    -->
    <div :is="currentView"></div>
  </div>
</template>

<script>
import studentList from "./StudentList";
import teacherList from "./TeacherList";
import courseList from "./CourseList";
import classList from "./ClassList";
import scoreList from "./ScoreList";

export default {
  name: "Bar.vue",
  data() {
    return {
      studentList: 'studentList',
      teacherList: 'teacherList',
      courseList:'courseList',
      classList:'classList',
      scoreList:'scoreList',
      currentView:null
    }
  },
  computed: {
    routes() {
      return this.$store.state.routes;
    },
    user() {
      return this.$store.state.adminName;
    },
    roles(){
      return this.$store.state.roles;
    }

  },
  methods: {
    logout() {
          // 调用注销接口
          this.axios.post("/api/logout");
          // 清空用户信息
          this.$store.commit("logout");
          this.$router.push({ path: "/login" });

    },
    tabChange(tabItem) {

      this.currentView = tabItem;
    }
  },
  components:{
    studentList,
    teacherList,
    courseList,
    classList,
    scoreList
  }

}
</script>

<style scoped>

</style>
